<template>
	<view class="content">
		<view style="display: flex;justify-content: center;align-items: center;">
			<view class="user">
				<view class="user_img">
					<image :src="userImg" style="width: 100%;height: 100%;border-radius: 60rpx;"></image>
				</view>
				<view class="user_txt">管理员：{{ curUser.userName }}</view>
				<view class="user_i">
					<view class="user_icon">
						<image src="../../static/admin.png" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="user_icon_desc">管理员</view>
				</view>
			</view>
		</view>
		<!-- 我的团队详细信息 -->
		<view class="team">
			<!-- 我的下级 -->
			<view class="tuijian_area">
				<view class="tuijian_icon">
					<image src="../../static/tuijian_icon.png" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="tuijian_txt">全部成员</view>
				<view style="font-size: 34rpx;font-weight: 550;margin-left: 20rpx;color: red;">
					{{ teams.count-1}}
				</view>
			</view>

			<!-- 董事组卡片 -->
			<view class="guanfang_desc" @click="dsgCardEvent">
				<view style="width:20rpx;padding-top: 30rpx;padding-left: 16rpx;">
					<image v-show="!dsgCardStatus" src="../../static/sanjiao.png" style="width: 14rpx;height: 14rpx;">
					</image>
					<image v-show="dsgCardStatus" src="../../static/sanjiaoxia.png" style="width: 14rpx;height: 14rpx;">
					</image>
				</view>
				<view style="width:480rpx;font-size: 36rpx;font-weight: 500;margin-top: 30rpx;color: #38498e;">
					董事组
				</view>
				<view style="width:200rpx;font-size: 30rpx;margin-top: 36rpx;color: #38498e;">
					董事代理数 {{ teams.dongshisNums }}
				</view>
			</view>
			
			<view v-show="dsgCardStatus"  v-for="(item, index) in teams.dongshis" :key="item.id">
				<view @click="dsCardEvent" class="guanfang_info">
					<view style="width: 72rpx;padding-left: 10rpx;">
						<image src="../../static/guanfang_user.png" style="width: 72rpx;height: 72rpx;"></image>
					</view>
					<view style="font-size: 36rpx;font-weight: 500;color: black;padding-left: 10rpx;">
						{{ item.nickName }}
					</view>
					<view style="width:72rpx; height: 28rpx;margin-left: 10rpx;padding-bottom: 8rpx;">
						<image src="../../static/dongshi_icon.png" style="width:72rpx; height: 28rpx;"></image>
					</view>
					<view style="width:200rpx; height: 22rpx;margin-left: 10rpx;padding-bottom: 18rpx;">
						下级 {{ item.dsgfsNum }}
					</view>
					<view style="width:14rpx; height: 22rpx;padding-bottom: 18rpx;">
						<image v-show="!dsgfCardStatus" src="../../static/dsy.png" style="width:14rpx;height: 22rpx;">
						</image>
						<image v-show="dsgfCardStatus" src="../../static/dsx.png" style="width: 22rpx;height: 14rpx;">
						</image>
					</view>
				</view>
				<!-- 董事-官方卡片-->
				<view  v-show="dsgfCardStatus" v-for="(t, index) in item.dsgfs" :key="t.id" >
					<view  @click="dsgfCardEvent" style="padding-left: 25rpx;width: 675rpx;" class="guanfang_info">
						<view style="width: 72rpx;padding-left: 10rpx;">
							<image src="../../static/guanfang_user.png" style="width: 72rpx;height: 72rpx;"></image>
						</view>
						<view style="font-size: 36rpx;font-weight: 500;color: black;padding-left: 10rpx; #a93a0c;">
							{{ t.nickName }}
						</view>
						<view style="width:72rpx; height: 28rpx;margin-left: 10rpx;padding-bottom: 8rpx;">
							<image src="../../static/guanfang_icon.png" style="width:72rpx; height: 28rpx;"></image>
						</view>
						<view style="width:200rpx; height: 22rpx;margin-left: 10rpx;padding-bottom: 18rpx; #a93a0c;">
							下级 {{ t.dsgfcysNum }}
						</view>
						<view style="width:14rpx; height: 22rpx;padding-bottom: 18rpx;">
							<image v-show="!dsgfcyCardStatus" src="../../static/dsy.png" style="width:14rpx;height: 22rpx;">
							</image>
							<image v-show="dsgfcyCardStatus" src="../../static/dsx.png" style="width: 22rpx;height: 14rpx;">
							</image>
						</view>
					</view>
					<!-- 董事-官方-创业卡片-->
					<view v-show="dsgfcyCardStatus" v-for="(a, index) in t.dsgfcys" :key="a.id" >
						<view style="padding-left: 50rpx;width: 650rpx;" class="guanfang_info">
							<view style="width: 72rpx;padding-left: 10rpx;">
								<image src="../../static/guanfang_user.png" style="width: 72rpx;height: 72rpx;"></image>
							</view>
							<view style="font-size: 36rpx;font-weight: 500;color: black;padding-left: 10rpx;">
								{{ a.nickName }}
							</view>
							<view style="width:72rpx; height: 28rpx;margin-left: 10rpx;padding-bottom: 8rpx;">
								<image src="../../static/chuangye_icon.png" style="width:72rpx; height: 28rpx;"></image>
							</view>
						</view>
					</view>
				</view>
				<!-- 董事-创业卡片-->
				<view  v-show="dsgfCardStatus" v-for="(t, index) in item.dscys" :key="t.id" >
					<view  @click="dsgfCardEvent" style="padding-left: 25rpx;width: 675rpx;" class="guanfang_info">
						<view style="width: 72rpx;padding-left: 10rpx;">
							<image src="../../static/guanfang_user.png" style="width: 72rpx;height: 72rpx;"></image>
						</view>
						<view style="font-size: 36rpx;font-weight: 500;color: black;padding-left: 10rpx;">
							{{ t.nickName }}
						</view>
						<view style="width:72rpx; height: 28rpx;margin-left: 10rpx;padding-bottom: 8rpx;">
							<image src="../../static/chuangye_icon.png" style="width:72rpx; height: 28rpx;"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 董事组卡片-->
			
			<!-- 直属官方组 -->
			<view class="guanfang_desc" @click="gfzCardEvent">
				<view style="width:20rpx;padding-top: 30rpx;padding-left: 16rpx;">
					<image v-show="!gfzCardStatus" src="../../static/sanjiao.png" style="width: 14rpx;height: 14rpx;">
					</image>
					<image v-show="gfzCardStatus" src="../../static/sanjiaoxia.png" style="width: 14rpx;height: 14rpx;">
					</image>
				</view>
				<view style="width:480rpx;font-size: 36rpx;font-weight: 500;margin-top: 30rpx;color: #a93a0c;">
					直属官方组
				</view>
				<view style="width:200rpx;font-size: 30rpx;margin-top: 36rpx;color: #a93a0c;">
					官方代理数 {{ teams.zsgfsNum }}
				</view>
			</view>
			
			<view v-show="gfzCardStatus" >
				<!-- 官方卡片-->
				<view  v-show="gfzCardStatus" v-for="(item, index) in teams.zsgfs" :key="item.id" >
					<view  @click="zsgfzcyCardEvent" style="padding-left: 25rpx;width: 675rpx;" class="guanfang_info">
						<view style="width: 72rpx;padding-left: 10rpx;">
							<image src="../../static/guanfang_user.png" style="width: 72rpx;height: 72rpx;"></image>
						</view>
						<view style="font-size: 36rpx;font-weight: 500;color: black;padding-left: 10rpx;">
							{{ item.nickName }}
						</view>
						<view style="width:72rpx; height: 28rpx;margin-left: 10rpx;padding-bottom: 8rpx;">
							<image src="../../static/guanfang_icon.png" style="width:72rpx; height: 28rpx;"></image>
						</view>
						<view style="width:200rpx; height: 22rpx;margin-left: 10rpx;padding-bottom: 18rpx;">
							下级 {{ item.zsgfcysNum }}
						</view>
						<view style="width:14rpx; height: 22rpx;padding-bottom: 18rpx;">
							<image v-show="!zsgfzcyCard" src="../../static/dsy.png" style="width:14rpx;height: 22rpx;">
							</image>
							<image v-show="zsgfzcyCard" src="../../static/dsx.png" style="width: 22rpx;height: 14rpx;">
							</image>
						</view>
					</view>
					<!-- 官方-创业卡片-->
					<view v-show="zsgfzcyCard" v-for="(a, index) in item.zsgfcys" :key="a.id" >
						<view style="padding-left: 50rpx;width: 650rpx;" class="guanfang_info">
							<view style="width: 72rpx;padding-left: 10rpx;">
								<image src="../../static/guanfang_user.png" style="width: 72rpx;height: 72rpx;"></image>
							</view>
							<view style="font-size: 36rpx;font-weight: 500;color: black;padding-left: 10rpx;">
								{{ a.nickName }}
							</view>
							<view style="width:72rpx; height: 28rpx;margin-left: 10rpx;padding-bottom: 8rpx;">
								<image src="../../static/chuangye_icon.png" style="width:72rpx; height: 28rpx;"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 直属官方组 -->
			
			<!-- 直属创业组 -->
			<view class="guanfang_desc" @click="cyzCardEvent">
				<view style="width:20rpx;padding-top: 30rpx;padding-left: 16rpx;">
					<image v-show="!cyzcyCardStatus" src="../../static/sanjiao.png" style="width: 14rpx;height: 14rpx;">
					</image>
					<image v-show="cyzcyCardStatus" src="../../static/sanjiaoxia.png" style="width: 14rpx;height: 14rpx;">
					</image>
				</view>
				<view style="width:480rpx;font-size: 36rpx;font-weight: 500;margin-top: 30rpx;color:  #38498e;">
					直属创业组
				</view>
				<view style="width:200rpx;font-size: 30rpx;margin-top: 36rpx;color:  #38498e;">
					创业代理数 {{ teams.zscysNum }}
				</view>
			</view>
			
			<view v-show="cyzcyCardStatus"  v-for="(item, index) in teams.zscys" :key="item.id">
				<view  style="width: 700rpx;" class="guanfang_info">
					<view style="width: 72rpx;padding-left: 10rpx;">
						<image src="../../static/guanfang_user.png" style="width: 72rpx;height: 72rpx;"></image>
					</view>
					<view style="font-size: 36rpx;font-weight: 500;color: black;padding-left: 10rpx;">
						{{ item.nickName }}
					</view>
					<view style="width:72rpx; height: 28rpx;margin-left: 10rpx;padding-bottom: 8rpx;">
						<image src="../../static/chuangye_icon.png" style="width:72rpx; height: 28rpx;"></image>
					</view>
				</view>
			</view>
			<!-- 直属创业组 -->
		</view>
	</view>
</template>

<script>
	import config from '../../utils/config.js'
	import request from '../../utils/request.js'
	import {
		checkLogin
	} from '../../utils/common.js'

	export default {
		data() {
			return {
				curUser: null,
				teams: {},
				cyType: false,
				dsType: false,
				gfType: false,
				userImg: '',
				myUpLevel: '',

			
				
				dsgCardStatus: false,
				dsCardStatus:false,
				dsgfCardStatus:false,
				dsgfcyCardStatus:false,
				
				gfzCardStatus:false,
				gfzcyCardStatus:false,
				cyzcyCardStatus:false,
				zsgfzcyCard:false

			}
		},
		created() {
			// 获取用户微信基本信息
			var _this = this;
			this.checkInfo()
		},
		methods: {
			checkInfo() {
				var _this = this;
				try {
					if (checkLogin()) {
						_this.userImg = uni.getStorageSync('userImg');
						_this.getUserInfo()
					} else {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}
				} catch (e) {
					// error
				}
			},
			getUserInfo() {
				var _this = this;
				_this.proxyShow = false;
				request({
					url: '/getInfo',
					method: "GET"
				}).then(res => {
					if (200 == res.code) {
						_this.curUser = res.user;
						request({
							url: '/system/user/myteams',
							method: "GET"
						}).then(res => {
							if (200 == res.code) {
								_this.teams = res.data;
								console.info(_this.teams)
								console.info(JSON.stringify(_this.teams))
								if (_this.curUser.ctype == '官方') {
									_this.gfType = true;
									_this.dsType = false;
									_this.cyType = false;
									_this.myUpLevel = '我的上级'
								} else if (_this.curUser.ctype == '创业') {
									_this.gfType = false;
									_this.dsType = false;
									_this.cyType = true;
									_this.myUpLevel = '我的上级'
									_this.isShowDownLevel = false
								} else if (_this.curUser.ctype == '董事') {
									_this.gfType = false;
									_this.dsType = true;
									_this.cyType = false;
									_this.myUpLevel = '我的推荐人'
								}
							}
						})
					}
				})

			},
			dsgCardEvent() { // 董事组点击
				// 董事卡片状态
				this.dsgCardStatus = !this.dsgCardStatus;
			},
			dsCardEvent() { // 董事点击
				// 董事-官方 卡片状态
				this.dsgfCardStatus = !this.dsgfCardStatus;
			},
			dsgfCardEvent(){ // 董事官方点击
			// 董事-官方-创业 卡片状态
				this.dsgfcyCardStatus = !this.dsgfcyCardStatus;
			},
			gfzCardEvent(){ // 官方组点击
				this.gfzCardStatus= !this.gfzCardStatus
			},
			gfzgfCardEvent(){ // 官方组官方卡片点击
				// 官方组创业
				this.gfzcyCardStatus= !this.gfzcyCardStatus
			},
			cyzCardEvent(){  // 创业组点击
				this.cyzcyCardStatus= !this.cyzcyCardStatus
			},
			zsgfzcyCardEvent(){
				this.zsgfzcyCard = !this.zsgfzcyCard
			},
			login() {
				uni.navigateTo({
					url: '/pages/login/login?id=zhangsan'
				});
			}
		}
	}
</script>

<style>
	page {
		// 整个页面白色背景实现方式1
		background-color: white;
	}

	.user {
		/**渐变色背景**/
		/** background-image: linear-gradient(to right, #fdd706, #fdb932);**/
		background-image: url("https://zhujinhui.top/ss/zhujinhui/minis/user_back.png");
		display: flex;
		align-items: center;
		width: 700rpx;
		height: 240rpx;
		border-radius: 15rpx;
		/** border: solid 1rpx red;**/
	}

	.user_img {
		height: 122rpx;
		width: 122rpx;
		margin-left: 28rpx;
		/** border: solid 1rpx red; **/
	}

	.user_txt {
		height: 122rpx;
		width: 400rpx;
		margin-left: 28rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 34rpx;
		font-weight: 542;
	}

	.user_i {
		height: 122rpx;
		width: 64rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-left: 40rpx;
	}

	.user_icon {
		height: 64rpx;
		width: 64rpx;
	}

	.user_icon_desc {
		font-size: 26rpx;
		width: 80rpx;
		font-weight: 800;
		margin-left: 6rpx;
		margin-top: 4rpx;
	}

	.team {
		border-radius: 10rpx;
	}

	.my_tuijian {
		padding-top: 10rpx;
	}

	.tuijian_area {
		display: flex;
		align-items: center;
		padding-top: 25rpx;
		padding-bottom: 25rpx;
		margin-left: 25rpx;
		margin-right: 25rpx;
	}

	.tuijian_icon {
		width: 8rpx;
		height: 34rpx;
	}

	.tuijian_txt {
		font-size: 30rpx;
		font-weight: 600;
		margin-left: 20rpx;
	}

	.tuijian_info {
		height: 120rpx;
		border-radius: 10rpx;
		margin-left: 25rpx;
		margin-right: 25rpx;
		background-image: linear-gradient(to right, #fdd706, #fdb932);
		display: flex;
		align-items: center;
	}

	.up_people {
		width: 76rpx;
		height: 86rpx;
		margin-left: 20rpx;
	}

	.guan {
		background-color: #FFFFFF;
	}

	.guanfang {
		width: 700rpx;
		height: 120rpx;
		margin-top: 10rpx;
		border-radius: 10rpx;
		border: solid 1rpx #d6d6d6;
		margin-left: 25rpx;
		display: flex;
	}

	.guanfang_desc {
		width: 700rpx;
		height: 120rpx;
		margin-top: 10rpx;
		border-radius: 10rpx;
		border: solid 1rpx #d6d6d6;
		margin-left: 25rpx;
		display: flex;
	}

	.guanfang_info {
		width: 700rpx;
		height: 120rpx;
		margin-top: 1rpx;
		margin-left: 25rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-bottom: solid 1rpx #d6d6d6;
		border-left: solid 1rpx #d6d6d6;
		border-right: solid 1rpx #d6d6d6;
	}
</style>